.wrapper {
  $bright: #f3b43f;
  $gold  : #9c7a3e;
  $dark  : #635338;

  $duration: 8s;
  width    : 100%;
  height   : 700px;
  position : relative;

  div {
    width                 : 100%;
    height                : 700px;
    display               : grid;
    align-items           : center;
    // background-color   : #635338;
    animation             : wobble 5s ease-in-out infinite;
    transform-origin      : center center;
    transform-style       : preserve-3d;
    perspective           : 500px;
  }

  @keyframes wobble {

    0%,
    100% {
      transform: rotate3d(1, 1, 0, 40deg);
    }

    25% {
      transform: rotate3d(-1, 1, 0, 40deg);
    }

    50% {
      transform: rotate3d(-1, -1, 0, 40deg);
    }

    75% {
      transform: rotate3d(1, -1, 0, 40deg);
    }
  }

  h1 {
    position      : absolute;
    display       : block;
    width         : 100%;
    top           : calc(50% - 60px);
    font-size     : 120px;
    letter-spacing: 5px;
    font-weight   : bold;
    text-transform: uppercase;
    color         : rgba(255, 100, 100, 1);
    text-shadow   :
      0 0 5px rgba(255, 0, 0, 1),
      0 0 20px rgba(255, 0, 0, .8),
      0 0 50px rgba(255, 0, 0, .6);
    animation: glow 10s ease-in-out infinite;
  }

  @keyframes glow {
    from {
      filter: hue-rotate(0);
    }

    to {
      filter: hue-rotate(360deg);
    }
  }

  h1:nth-child(2) {
    transform: translateZ(5px);
  }

  h1:nth-child(3) {
    transform: translateZ(10px);
  }

  h1:nth-child(4) {
    transform: translateZ(15px);
  }

  h1:nth-child(5) {
    transform: translateZ(20px);
  }

  h1:nth-child(6) {
    transform: translateZ(25px);
  }

  h1:nth-child(7) {
    transform: translateZ(30px);
  }

  h1:nth-child(8) {
    transform: translateZ(35px);
  }

  h1:nth-child(9) {
    transform: translateZ(40px);
  }

  h1:nth-child(10) {
    transform: translateZ(45px);
  }
}